<template>
  <div class="scrolling-container">
    <div class="scroll-wrapper">
      <div
        class="scroll-content"
        :style="{ transform: `translateY(-${currentIndex * 30}px)` }"
      >
        <div v-for="(item, index) in news" :key="index" class="news-item">
          <span>{{ formatDate(item.update_time) }}</span>
          <div v-html="item.title" class="desc-title"></div>
          <!-- <span class="score-i"> {{ item.keywords }}</span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { formatDate } from "@/utils/index.js";

const props = defineProps({
  news: {
    type: Array,
    required: true,
  },
});
console.log(props.news, "news==");

const currentIndex = ref(0);
let timer = null;

const scroll = () => {
  if (currentIndex.value < props.news.length - 1) {
    currentIndex.value++;
  } else {
    currentIndex.value = 0;
  }
};

onMounted(() => {
  timer = setInterval(scroll, 3000); // 每3秒滚动一次
});

onUnmounted(() => {
  if (timer) clearInterval(timer);
});
</script>

<style scoped>
.scrolling-container {
  height: 30px; /* 显示单行文字的高度 */
  overflow: hidden;
}

.scroll-wrapper {
  position: relative;
}

.scroll-content {
  transition: transform 0.5s ease;
}

.news-item {
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.score-i {
  font-size: 18px;
  color: #c04718;
  font-weight: 600;
  margin: 0px 5px;
}
.desc-title {
  margin: 0px 5px;
  width: 330px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
